<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link type="text/css" rel="stylesheet" href="css/style.css"/>
    <!--[if IE 6]>
    <![endif]-->
    <script type="text/javascript" src="js/axios.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript" src="js/car.js"></script>
    <link rel="stylesheet" type="text/css" href="css/ShopShow.css"/>
    <link rel="stylesheet" type="text/css" href="css/MagicZoom.css"/>
    <title>尤洪</title>
</head>
<body>
<!--Begin Header Begin-->
<div class="soubg">
    <div class="sou">
        <!--Begin 所在收货地区 Begin-->
        <span class="s_city_b">
        	<span class="fl">送货至：</span>
            <span class="s_city">
            	<span>四川</span>
                <div class="s_city_bg">
                	<div class="s_city_t"></div>
                    <div class="s_city_c">
                    	<h2>请选择所在的收货地区</h2>
                        <table border="0" class="c_tab" style="width:235px; margin-top:10px;" cellspacing="0"
                               cellpadding="0">
                          <tr>
                            <th>A</th>
                            <td class="c_h"><span>安徽</span><span>澳门</span></td>
                          </tr>
                          <tr>
                            <th>B</th>
                            <td class="c_h"><span>北京</span></td>
                          </tr>
                          <tr>
                            <th>C</th>
                            <td class="c_h"><span>重庆</span></td>
                          </tr>
                          <tr>
                            <th>F</th>
                            <td class="c_h"><span>福建</span></td>
                          </tr>
                          <tr>
                            <th>G</th>
                            <td class="c_h"><span>广东</span><span>广西</span><span>贵州</span><span>甘肃</span></td>
                          </tr>
                          <tr>
                            <th>H</th>
                            <td class="c_h"><span>河北</span><span>河南</span><span>黑龙江</span><span>海南</span><span>湖北</span><span>湖南</span></td>
                          </tr>
                          <tr>
                            <th>J</th>
                            <td class="c_h"><span>江苏</span><span>吉林</span><span>江西</span></td>
                          </tr>
                          <tr>
                            <th>L</th>
                            <td class="c_h"><span>辽宁</span></td>
                          </tr>
                          <tr>
                            <th>N</th>
                            <td class="c_h"><span>内蒙古</span><span>宁夏</span></td>
                          </tr>
                          <tr>
                            <th>Q</th>
                            <td class="c_h"><span>青海</span></td>
                          </tr>
                          <tr>
                            <th>S</th>
                            <td class="c_h"><span>上海</span><span>山东</span><span>山西</span><span
                                    class="c_check">四川</span><span>陕西</span></td>
                          </tr>
                          <tr>
                            <th>T</th>
                            <td class="c_h"><span>台湾</span><span>天津</span></td>
                          </tr>
                          <tr>
                            <th>X</th>
                            <td class="c_h"><span>西藏</span><span>香港</span><span>新疆</span></td>
                          </tr>
                          <tr>
                            <th>Y</th>
                            <td class="c_h"><span>云南</span></td>
                          </tr>
                          <tr>
                            <th>Z</th>
                            <td class="c_h"><span>浙江</span></td>
                          </tr>
                        </table>
                    </div>
                </div>
            </span>
        </span>
        <!--End 所在收货地区 End-->
        <span class="fr">
        	<span class="fl">你好，请<a href="Login.html">登录</a>&nbsp; <a href="Regist.html" style="color:#ff4e00;">免费注册</a>&nbsp;|&nbsp;<a
                    href="#">我的订单</a>&nbsp;|</span>
        	<span class="ss">
            	<div class="ss_list">
                	<a href="#">收藏夹</a>
                    <div class="ss_list_bg">
                    	<div class="s_city_t"></div>
                        <div class="ss_list_c">
                        	<ul>
                            	<li><a href="#">我的收藏夹</a></li>
                                <li><a href="#">我的收藏夹</a></li>
                            </ul>
                        </div>
                    </div>     
                </div>
                <div class="ss_list">
                	<a href="#">客户服务</a>
                    <div class="ss_list_bg">
                    	<div class="s_city_t"></div>
                        <div class="ss_list_c">
                        	<ul>
                            	<li><a href="#">客户服务</a></li>
                                <li><a href="#">客户服务</a></li>
                                <li><a href="#">客户服务</a></li>
                            </ul>
                        </div>
                    </div>    
                </div>
                <div class="ss_list">
                	<a href="#">网站导航</a>
                    <div class="ss_list_bg">
                    	<div class="s_city_t"></div>
                        <div class="ss_list_c">
                        	<ul>
                            	<li><a href="#">网站导航</a></li>
                                <li><a href="#">网站导航</a></li>
                            </ul>
                        </div>
                    </div>    
                </div>
            </span>
            <span class="fl">|&nbsp;关注我们：</span>
            <span class="s_sh"><a href="#" class="sh1">新浪</a><a href="#" class="sh2">微信</a></span>
            <span class="fr">|&nbsp;<a href="#">手机版&nbsp;<img src="images/s_tel.png" align="absmiddle"/></a></span>
        </span>
    </div>
</div>
<div id="myVue">
    <div class="top">
        <div class="logo"><a href="Index.html"><img src="images/logo.png"/></a></div>
        <div class="search">
            <form>
                <input type="text" value="" class="s_ipt"/>
                <input type="submit" value="搜索" class="s_btn"/>
            </form>
            <span class="fl"><a href="#">咖啡</a><a href="#">iphone 6S</a><a href="#">新鲜美食</a><a href="#">蛋糕</a><a
                    href="#">日用品</a><a href="#">连衣裙</a></span>
        </div>
        <div class="i_car">
            <div class="car_t">购物车 [ <span>{{car.totalNum}}</span> ]</div>
            <div class="car_bg">
                <!--Begin 购物车未登录 Begin-->
                <div v-if="loginUser.loginName==''" class="un_login">还未登录！<a href="Login.html"
                                                                                 style="color:#ff4e00;">马上登录</a>
                    查看购物车！
                </div>
                <!--End 购物车未登录 End-->
                <!--Begin 购物车已登录 Begin-->
                <div v-else-if="car.totalPrice==0" class="un_login">暂无商品！<a href="CategoryList.html"
                                                                                style="color:#ff4e00;">购买商品</a>
                </div>
                <div v-else>
                    <ul class="cars">
                        <li v-for="carDetail in carDetailList">
                            <div class="img"><a href="#"><img
                                    :src="'http://192.168.126.132:8090/easyBuy/files/'+carDetail.fileName" width="58"
                                    height="58"/></a></div>
                            <div class="name"><a href="#">{{carDetail.productName}}</a></div>
                            <div class="price"><font color="#ff4e00">￥{{ carDetail.totalPrice }}</font>
                                X{{ carDetail.totalNum }}
                            </div>
                        </li>

                    </ul>
                    <div class="price_sum">共计&nbsp; <font color="#ff4e00">￥</font><span>{{car.totalPrice}}</span>
                    </div>
                    <div class="price_a"><a :href="'BuyCar.html?id='+car.id">去购物车结算</a></div>
                    <!--End 购物车已登录 End-->
                </div>
            </div>
        </div>
    </div>
    <!--End Header End-->
    <!--Begin Menu Begin-->
    <div class="menu_bg">
        <div class="menu">
            <!--Begin 商品分类详情 Begin-->
            <div class="nav">
                <div class="nav_t" @click="allProduct()" style="cursor: pointer;">全部商品分类</div>
            </div>
            <div class="leftNav none">
            </div>
            <ul class="menu_r">
                <li><a href="Index.html">首页</a></li>
                <li v-for="(type) in typeList" v-if="type.type==1">
                    <a href="#" @click.prevent="typeSelect(type.id)">{{type.name}}</a>
                </li>
            </ul>
            <!--End 商品分类详情 End-->
            <div class="m_ad">中秋送好礼！</div>
        </div>
    </div>


    <!--End Menu End-->
    <div class="i_bg">
        <!--    <div class="postion">-->
        <!--        <span class="fl">全部 > 美妆个护 > 香水 > 迪奥 > 迪奥真我香水</span>-->
        <!--    </div>-->
        <div class="content">

            <div id="tsShopContainer">
                <div id="tsImgS"><a :href="'http://192.168.126.132:8090/easyBuy/files/'+product.fileName" title="Images"
                                    class="MagicZoom" id="MagicZoom"><img
                        :src="'http://192.168.126.132:8090/easyBuy/files/'+product.fileName" width="390" height="390"/></a>
                </div>
                <div id="tsPicContainer">
                    <div id="tsImgSArrL" onclick="tsScrollArrLeft()"></div>
                    <div id="tsImgSCon">
                        <ul>
                            <li onclick="showPic(0)" rel="MagicZoom" class="tsSelectImg"><img src="images/ps1.jpg"
                                                                                              tsImgS="images/ps1.jpg"
                                                                                              width="79" height="79"/>
                            </li>
                            <li onclick="showPic(1)" rel="MagicZoom"><img src="images/ps2.jpg" tsImgS="images/ps2.jpg"
                                                                          width="79" height="79"/></li>
                            <li onclick="showPic(2)" rel="MagicZoom"><img src="images/ps3.jpg" tsImgS="images/ps3.jpg"
                                                                          width="79" height="79"/></li>
                            <li onclick="showPic(3)" rel="MagicZoom"><img src="images/ps4.jpg" tsImgS="images/ps4.jpg"
                                                                          width="79" height="79"/></li>
                            <li onclick="showPic(4)" rel="MagicZoom"><img src="images/ps1.jpg" tsImgS="images/ps1.jpg"
                                                                          width="79" height="79"/></li>
                            <li onclick="showPic(5)" rel="MagicZoom"><img src="images/ps2.jpg" tsImgS="images/ps2.jpg"
                                                                          width="79" height="79"/></li>
                            <li onclick="showPic(6)" rel="MagicZoom"><img src="images/ps3.jpg" tsImgS="images/ps3.jpg"
                                                                          width="79" height="79"/></li>
                            <li onclick="showPic(7)" rel="MagicZoom"><img src="images/ps4.jpg" tsImgS="images/ps4.jpg"
                                                                          width="79" height="79"/></li>
                        </ul>
                    </div>
                    <div id="tsImgSArrR" onclick="tsScrollArrRight()"></div>
                </div>
                <img class="MagicZoomLoading" width="16" height="16" src="images/loading.gif" alt="Loading..."/>
            </div>

            <div class="pro_des">
                <div class="des_name">
                    <p>{{product.name}}</p>
                    {{product.description}}
                </div>
                <div class="des_price">
                    本店价格：<b>￥{{product.price}}</b><br/>
                </div>
                <div class="des_choice">
                    <span class="fl">型号选择：</span>
                    <ul>
                        <li class="checked">30ml
                            <div class="ch_img"></div>
                        </li>
                        <li>50ml
                            <div class="ch_img"></div>
                        </li>
                        <li>100ml
                            <div class="ch_img"></div>
                        </li>
                    </ul>
                </div>
                <div class="des_choice">
                    <span class="fl">颜色选择：</span>
                    <ul>
                        <li>红色
                            <div class="ch_img"></div>
                        </li>
                        <li class="checked">白色
                            <div class="ch_img"></div>
                        </li>
                        <li>黑色
                            <div class="ch_img"></div>
                        </li>
                    </ul>
                </div>
                <div class="des_share">
                    <div class="d_sh">
                        分享
                        <div class="d_sh_bg">
                            <a href="#"><img src="images/sh_1.gif"/></a>
                            <a href="#"><img src="images/sh_2.gif"/></a>
                            <a href="#"><img src="images/sh_3.gif"/></a>
                            <a href="#"><img src="images/sh_4.gif"/></a>
                            <a href="#"><img src="images/sh_5.gif"/></a>
                        </div>
                    </div>
                    <div class="d_care"><a href="#" @click.prevent="addLike(product.id)">收藏商品</a></div>
                </div>
                <div class="des_join">
                    <div class="j_nums">
                        <input type="text"
                               @input="inputNum($event)"
                               v-model="totalNum" class="n_ipt"/>
                        <input type="button" value="" @click="changeProductNum('add')" class="n_btn_1"/>
                        <input type="button" value="" @click="changeProductNum('sub')" class="n_btn_2"/>
                    </div>
                    <span class="fl"><a href="#" @click.prevent="toCar(product.id)"><img
                            src="images/j_car.png"/></a></span>
                </div>
            </div>

            <div class="s_brand">
                <div class="s_brand_img"><img src="images/sbrand.jpg" width="188" height="132"/></div>
                <div class="s_brand_c"><a href="#">进入品牌专区</a></div>
            </div>


        </div>
        <div class="content mar_20">
            <div class="l_history">
                <div class="his_t">
                    <span class="fl">商品收藏</span>
                    <span class="fr"><a href="#" @click.prevent="delAllLikes()">清空</a></span>
                </div>
                <ul>
                    <li v-for="like in likes" @click="toProductDetail(like.productId)">
                        <div class="img"><a href="#"><img :src="'http://192.168.126.132:8090/easyBuy/files/'+like.fileName"
                                                          width="185" height="162"/></a></div>
                        <div class="name"><a href="#">{{like.productName}}</a></div>
                        <div class="price">
                            <font>￥<span>{{like.price}}</span></font>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="l_list">
                <div class="des_border">
                    <div class="des_tit">
                        <ul>
                            <li class="current">推荐搭配</li>
                        </ul>
                    </div>
                    <div class="team_list">
                        <div class="img"><a href="#"><img src="images/mat_1.jpg" width="160" height="140"/></a></div>
                        <div class="name"><a href="#">倩碧补水组合套装8折促销</a></div>
                        <div class="price">
                            <div class="checkbox"><input type="checkbox" name="zuhe" checked="checked"/></div>
                            <font>￥<span>768.00</span></font> &nbsp; 18R
                        </div>
                    </div>
                    <div class="team_icon"><img src="images/jia_b.gif"/></div>
                    <div class="team_list">
                        <div class="img"><a href="#"><img src="images/mat_2.jpg" width="160" height="140"/></a></div>
                        <div class="name"><a href="#">香奈儿邂逅清新淡香水50ml</a></div>
                        <div class="price">
                            <div class="checkbox"><input type="checkbox" name="zuhe"/></div>
                            <font>￥<span>749.00</span></font> &nbsp; 18R
                        </div>
                    </div>
                    <div class="team_icon"><img src="images/jia_b.gif"/></div>
                    <div class="team_list">
                        <div class="img"><a href="#"><img src="images/mat_3.jpg" width="160" height="140"/></a></div>
                        <div class="name"><a href="#">香奈儿邂逅清新淡香水50ml</a></div>
                        <div class="price">
                            <div class="checkbox"><input type="checkbox" name="zuhe" checked="checked"/></div>
                            <font>￥<span>749.00</span></font> &nbsp; 18R
                        </div>
                    </div>
                    <div class="team_icon"><img src="images/equl.gif"/></div>
                    <div class="team_sum">
                        套餐价：￥<span>1517</span><br/>
                        <input type="text" value="1" class="sum_ipt"/><br/>
                        <a href="#"><img src="images/z_buy.gif"/></a>
                    </div>

                </div>
                <div class="des_border">
                    <div class="des_tit">
                        <ul>
                            <li class="current"><a href="#p_attribute">商品属性</a></li>
                            <li><a href="#p_details">商品详情</a></li>
                            <li><a href="#p_comment">商品评论</a></li>
                        </ul>
                    </div>
                    <div class="des_con" id="p_attribute">

                        <table border="0" align="center" style="width:100%; font-family:'宋体'; margin:10px auto;"
                               cellspacing="0" cellpadding="0">
                            <tr>
                                <td>商品名称：迪奥香水</td>
                                <td>商品编号：1546211</td>
                                <td>品牌： 迪奥（Dior）</td>
                                <td>上架时间：2015-09-06 09:19:09</td>
                            </tr>
                            <tr>
                                <td>商品毛重：160.00g</td>
                                <td>商品产地：法国</td>
                                <td>香调：果香调香型：淡香水/香露EDT</td>
                                <td>&nbsp;</td>
                            </tr>
                            <tr>
                                <td>容量：1ml-15ml</td>
                                <td>类型：女士香水，Q版香水，组合套装</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                            </tr>
                        </table>


                    </div>
                </div>

                <div class="des_border" id="p_details">
                    <div class="des_t">商品详情</div>
                    <div class="des_con">
                        <table border="0" align="center" style="width:745px; font-size:14px; font-family:'宋体';"
                               cellspacing="0" cellpadding="0">
                            <tr>
                                <td width="265"><img src="images/de1.jpg" width="206" height="412"/></td>
                                <td>
                                    <b>迪奥真我香水(Q版)</b><br/>
                                    【商品规格】：5ml<br/>
                                    【商品质地】：液体<br/>
                                    【商品日期】：与专柜同步更新<br/>
                                    【商品产地】：法国<br/>
                                    【商品包装】：无外盒 无塑封<br/>
                                    【商品香调】：花束花香调<br/>
                                    【适用人群】：适合女性（都市白领，性感，有女人味的成熟女性）<br/>
                                </td>
                            </tr>
                        </table>

                        <p align="center">
                            <img src="images/de2.jpg" width="746" height="425"/><br/><br/>
                            <img src="images/de3.jpg" width="750" height="417"/><br/><br/>
                            <img src="images/de4.jpg" width="750" height="409"/><br/><br/>
                            <img src="images/de5.jpg" width="750" height="409"/>
                        </p>

                    </div>
                </div>

                <div class="des_border" id="p_comment">
                    <div class="des_t">商品评论</div>

                    <table border="0" class="jud_tab" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="175" class="jud_per">
                                <p>80.0%</p>好评度
                            </td>
                            <td width="300">
                                <table border="0" style="width:100%;" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td width="90">好评<font color="#999999">（80%）</font></td>
                                        <td><img src="images/pl.gif" align="absmiddle"/></td>
                                    </tr>
                                    <tr>
                                        <td>中评<font color="#999999">（20%）</font></td>
                                        <td><img src="images/pl.gif" align="absmiddle"/></td>
                                    </tr>
                                    <tr>
                                        <td>差评<font color="#999999">（0%）</font></td>
                                        <td><img src="images/pl.gif" align="absmiddle"/></td>
                                    </tr>
                                </table>
                            </td>
                            <td width="185" class="jud_bg">
                                购买过雅诗兰黛第六代特润精华露50ml的顾客，在收到商品才可以对该商品发表评论
                            </td>
                            <td class="jud_bg">您可对已购买商品进行评价<br/><a href="#"><img src="images/btn_jud.gif"/></a>
                            </td>
                        </tr>
                    </table>


                    <table border="0" class="jud_list" style="width:100%; margin-top:30px;" cellspacing="0"
                           cellpadding="0">
                        <tr valign="top">
                            <td width="160"><img src="images/peo1.jpg" width="20" height="20" align="absmiddle"/>&nbsp;向死而生
                            </td>
                            <td width="180">
                                颜色分类：<font color="#999999">粉色</font> <br/>
                                型号：<font color="#999999">50ml</font>
                            </td>
                            <td>
                                产品很好，香味很喜欢，必须给赞。 <br/>
                                <font color="#999999">2015-09-24</font>
                            </td>
                        </tr>
                        <tr valign="top">
                            <td width="160"><img src="images/peo2.jpg" width="20" height="20" align="absmiddle"/>&nbsp;就是这么想的
                            </td>
                            <td width="180">
                                颜色分类：<font color="#999999">粉色</font> <br/>
                                型号：<font color="#999999">50ml</font>
                            </td>
                            <td>
                                送朋友，她很喜欢，大爱。 <br/>
                                <font color="#999999">2015-09-24</font>
                            </td>
                        </tr>
                        <tr valign="top">
                            <td width="160"><img src="images/peo3.jpg" width="20" height="20" align="absmiddle"/>&nbsp;墨镜墨镜
                            </td>
                            <td width="180">
                                颜色分类：<font color="#999999">粉色</font> <br/>
                                型号：<font color="#999999">50ml</font>
                            </td>
                            <td>
                                大家都说不错<br/>
                                <font color="#999999">2015-09-24</font>
                            </td>
                        </tr>
                        <tr valign="top">
                            <td width="160"><img src="images/peo4.jpg" width="20" height="20" align="absmiddle"/>&nbsp;那*****洋
                                <br/><font color="#999999">（匿名用户）</font></td>
                            <td width="180">
                                颜色分类：<font color="#999999">粉色</font> <br/>
                                型号：<font color="#999999">50ml</font>
                            </td>
                            <td>
                                下次还会来买，推荐。<br/>
                                <font color="#999999">2015-09-24</font>
                            </td>
                        </tr>
                    </table>


                    <div class="pages">
                        <a href="#" class="p_pre">上一页</a><a href="#" class="cur">1</a><a href="#">2</a><a
                            href="#">3</a>...<a
                            href="#">20</a><a href="#" class="p_pre">下一页</a>
                    </div>

                </div>


            </div>
        </div>


        <!--Begin 弹出层-收藏成功 Begin-->
        <div id="fade" class="black_overlay"></div>
        <div id="MyDiv" class="white_content">
            <div class="white_d">
                <div class="notice_t">
                <span class="fr" style="margin-top:10px; cursor:pointer;" onclick="CloseDiv('MyDiv','fade')"><img
                        src="images/close.gif"/></span>
                </div>
                <div class="notice_c">

                    <table border="0" align="center" style="margin-top:;" cellspacing="0" cellpadding="0">
                        <tr valign="top">
                            <td width="40"><img src="images/suc.png"/></td>
                            <td>
                                <span style="color:#3e3e3e; font-size:18px; font-weight:bold;">您已成功收藏该商品</span><br/>
                                <a href="#">查看我的关注 >></a>
                            </td>
                        </tr>
                        <tr height="50" valign="bottom">
                            <td>&nbsp;</td>
                            <td><a href="#" class="b_sure">确定</a></td>
                        </tr>
                    </table>

                </div>
            </div>
        </div>
        <!--End 弹出层-收藏成功 End-->


        <!--Begin 弹出层-加入购物车 Begin-->
        <div id="fade1" class="black_overlay"></div>
        <div id="MyDiv1" class="white_content">
            <div class="white_d">
                <div class="notice_t">
                <span class="fr" style="margin-top:10px; cursor:pointer;" onclick="CloseDiv_1('MyDiv1','fade1')"><img
                        src="images/close.gif"/></span>
                </div>
                <div class="notice_c">

                    <table border="0" align="center" style="margin-top:;" cellspacing="0" cellpadding="0">
                        <tr valign="top">
                            <td width="40"><img src="images/suc.png"/></td>
                            <td>
                                <span style="color:#3e3e3e; font-size:18px; font-weight:bold;">宝贝已成功添加到购物车</span><br/>
                                购物车共有1种宝贝（3件） &nbsp; &nbsp; 合计：1120元
                            </td>
                        </tr>
                        <tr height="50" valign="bottom">
                            <td>&nbsp;</td>
                            <td><a href="#" class="b_sure">去购物车结算</a><a href="#" class="b_buy">继续购物</a></td>
                        </tr>
                    </table>

                </div>
            </div>
        </div>
    </div>
    <!--End 弹出层-加入购物车 End-->


    <!--Begin Footer Begin -->
    <div class="b_btm_bg bg_color">
        <div class="b_btm">
            <table border="0" style="width:210px; height:62px; float:left; margin-left:75px; margin-top:30px;"
                   cellspacing="0" cellpadding="0">
                <tr>
                    <td width="72"><img src="images/b1.png" width="62" height="62"/></td>
                    <td><h2>正品保障</h2>正品行货 放心购买</td>
                </tr>
            </table>
            <table border="0" style="width:210px; height:62px; float:left; margin-left:75px; margin-top:30px;"
                   cellspacing="0" cellpadding="0">
                <tr>
                    <td width="72"><img src="images/b2.png" width="62" height="62"/></td>
                    <td><h2>满38包邮</h2>满38包邮 免运费</td>
                </tr>
            </table>
            <table border="0" style="width:210px; height:62px; float:left; margin-left:75px; margin-top:30px;"
                   cellspacing="0" cellpadding="0">
                <tr>
                    <td width="72"><img src="images/b3.png" width="62" height="62"/></td>
                    <td><h2>天天低价</h2>天天低价 畅选无忧</td>
                </tr>
            </table>
            <table border="0" style="width:210px; height:62px; float:left; margin-left:75px; margin-top:30px;"
                   cellspacing="0" cellpadding="0">
                <tr>
                    <td width="72"><img src="images/b4.png" width="62" height="62"/></td>
                    <td><h2>准时送达</h2>收货时间由你做主</td>
                </tr>
            </table>
        </div>
    </div>
    <div class="b_nav">
        <dl>
            <dt><a href="#">新手上路</a></dt>
            <dd><a href="#">售后流程</a></dd>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">订购方式</a></dd>
            <dd><a href="#">隐私声明</a></dd>
            <dd><a href="#">推荐分享说明</a></dd>
        </dl>
        <dl>
            <dt><a href="#">配送与支付</a></dt>
            <dd><a href="#">货到付款区域</a></dd>
            <dd><a href="#">配送支付查询</a></dd>
            <dd><a href="#">支付方式说明</a></dd>
        </dl>
        <dl>
            <dt><a href="#">会员中心</a></dt>
            <dd><a href="#">资金管理</a></dd>
            <dd><a href="#">我的收藏</a></dd>
            <dd><a href="#">我的订单</a></dd>
        </dl>
        <dl>
            <dt><a href="#">服务保证</a></dt>
            <dd><a href="#">退换货原则</a></dd>
            <dd><a href="#">售后服务保证</a></dd>
            <dd><a href="#">产品质量保证</a></dd>
        </dl>
        <dl>
            <dt><a href="#">联系我们</a></dt>
            <dd><a href="#">网站故障报告</a></dd>
            <dd><a href="#">购物咨询</a></dd>
            <dd><a href="#">投诉与建议</a></dd>
        </dl>
        <div class="b_tel_bg">
            <a href="#" class="b_sh1">新浪微博</a>
            <a href="#" class="b_sh2">腾讯微博</a>
            <p>
                服务热线：<br/>
                <span>400-123-4567</span>
            </p>
        </div>
        <div class="b_er">
            <div class="b_er_c"><img src="images/er.gif" width="118" height="118"/></div>
            <img src="images/ss.png"/>
        </div>
    </div>
    <div class="btmbg">
        <div class="btm">
            备案/许可证编号：蜀ICP备12009302号-1-www.dingguagua.com Copyright © 2015-2018 尤洪商城网 All Rights Reserved.
            复制必究 , Technical Support: Dgg Group <br/>
            <img src="images/b_1.gif" width="98" height="33"/><img src="images/b_2.gif" width="98" height="33"/><img
                src="images/b_3.gif" width="98" height="33"/><img src="images/b_4.gif" width="98" height="33"/><img
                src="images/b_5.gif" width="98" height="33"/><img src="images/b_6.gif" width="98" height="33"/>
        </div>
    </div>
    <!--End Footer End -->
</div>
<script type="text/javascript">
    const myVue = new Vue({
        el: '#myVue',
        data: {
            likes: [],
            totalNum: 1,
            name: '',
            product: {
                id: '',
                name: '',
                description: '',
                price: '',
                stock: '',
                categoryLevel1Id: '',
                categoryLevel2Id: '',
                categoryLevel3Id: '',
                fileName: '',
                isDelete: '',
                createTime: '',
                preStock: '',
            },
            typeList: '',
            carDetailList: [],
            car: '',
            loginUser: {
                userId: "-1",
                loginName: ''
            },
        },
        methods: {
            loginOut: function () {
                window.sessionStorage.clear();
                axios({
                    url:'/api/user/exit'
                }).then(rs=>{
                    if (rs.data.code===200){
                        alert("注销成功!")
                    }else {
                        alert("注销失败！")
                    }
                })
            },
            delAllLikes: function () {
                if (myVue.loginUser.loginName === '') {
                    alert("请登录！")
                    return;
                }
                const isGo = window.confirm("是否清空收藏")
                if (!isGo) {
                    return;
                } else {
                    axios({
                        url: '/api/like/delAll',
                        params: {
                            loginName: myVue.loginUser.loginName,
                        }
                    }).then(rs => {
                        if (rs.data.isDel) {
                            alert("已清空!")
                            this.getLikes()
                        }
                    })
                }
            },
            getLikes: function () {
                axios({
                    url: '/api/like/getLikes',
                    params: {
                        loginName: myVue.loginUser.loginName,
                    }
                }).then(rs => {
                    let array = [];
                    for (index in rs.data.likes) {
                        array.push(rs.data.likes[index])
                    }
                    this.likes = array
                })
            },
            allProduct: function () {
                window.location='CategoryList.html'
            },
            addLike: function (id) {
                if (myVue.loginUser.loginName === '') {
                    alert("请登录！")
                    return;
                }
                axios({
                    url: '/api/product/getPro',
                    params: {
                        id
                    }
                }).then(function (rs) {
                    axios({
                        url: '/api/like/addLike',
                        params: {
                            loginName: myVue.loginUser.loginName,
                            productId: rs.data.product.id,
                            productName: rs.data.product.name,
                            fileName: rs.data.product.fileName,
                            price: rs.data.product.price,
                            stock: rs.data.product.stock,
                        }
                    }).then(function (rs) {
                        if (rs.data.code === 200) {
                            alert("已收藏！")
                            myVue.getLikes();
                        } else {
                            alert("收藏失败！！")
                        }
                    })
                })
            },
            inputNum(event) {
                const num = event.target.value;
                if (!/^\d+$/.test(num)) {
                    myVue.totalNum = 1
                    return;
                }
                if (num >= myVue.product.stock) {
                    myVue.totalNum = myVue.product.stock
                } else {
                    myVue.totalNum = num;
                    console.log(myVue.totalNum)
                    console.log(myVue.totalNum)
                    console.log(myVue.totalNum)
                }

            },
            changeProductNum: function (opr) {
                if (opr === 'add') {
                    if (myVue.totalNum >= myVue.product.stock) {
                        myVue.totalNum = myVue.product.stock
                        return;
                    }
                    this.totalNum++
                } else {
                    if (myVue.totalNum === 1) {
                        myVue.totalNum = 1
                        return;
                    }
                    this.totalNum--
                }
            },
            toCar: function (id) {
                if (myVue.loginUser.loginName === '') {
                    alert("请登录！")
                    return;
                }
                axios({
                    url: '/api/product/getPro',
                    params: {
                        id
                    }
                }).then(function (rs) {
                    let carStock=0;
                    for (let index in myVue.carDetailList) {
                        if (id==myVue.carDetailList[index].productId) {
                            carStock=myVue.carDetailList[index].totalNum;
                        }
                    }
                    const stock = rs.data.product.stock
                    if (stock <= carStock) {
                        alert("库存不足!")
                        return;
                    }
                    axios({
                        url: '/api/car/addCar',
                        params: {
                            loginName: myVue.loginUser.loginName,
                            productId: rs.data.product.id,
                            totalNum: myVue.totalNum,
                            productName: rs.data.product.name,
                            fileName: rs.data.product.fileName,
                            price: rs.data.product.price,
                            stock: rs.data.product.stock,
                        }
                    }).then(function (rs) {
                        myVue.getCar();
                        console.log(myVue.loginUser.loginName)
                    })
                })
            },
            getCar: function () {
                axios({
                    url: '/api/car/getCar',
                    params: {
                        loginName: this.loginUser.loginName
                    }
                }).then(rs => {
                    this.car = rs.data.car
                    this.carDetailList = [];
                    for (car in rs.data.carMap) {
                        this.carDetailList.push(rs.data.carMap[car]);
                    }
                })
            },
            typeSelect: function (id) {
                const categoryId = id;
                window.location = 'CategoryList.html?categoryId=' + categoryId
            },
            doInit: function () {
                const urlParams = new URLSearchParams(window.location.search);
                const id = urlParams.get('id');
                axios({
                    url: '/api/product/getPro',
                    params: {
                        id
                    }
                }).then(function (rs) {
                    myVue.product = rs.data.product
                    myVue.name = myVue.product.name
                    console.log("myVue###############" + myVue.product.stock)
                })
                axios({
                    url: '/api/type/getList',
                    params: {}
                }).then(rs => {
                    this.typeList = rs.data.typeList;
                    let array = [];
                    for (const type in myVue.typeList) {
                        if (this.typeList[type].parentId == 0) {
                            array.push(this.typeList[type])
                        }
                    }
                })
            }
        },
        created: function () {
            let token = window.sessionStorage.getItem('token');
            if (token === '' || token === null) {
                console.log("未登录")
                this.doInit();
            } else {
                axios({
                    url: '/api/user/findUserFromRedis'
                }).then(rs => {
                    if (rs.data.code === 200) {
                        this.loginUser.userId = rs.data.user.id;
                        this.loginUser.loginName = rs.data.user.loginName;
                        this.getCar();
                        this.doInit();
                        this.getLikes();
                    }
                })
            }
        }
    })
</script>
</body>
<![endif]-->
</html>
